<template>
  <div>
    <div class="menu">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <router-link :to="{name: 'child'}">
          <el-menu-item index="homePage">首页</el-menu-item>
        </router-link>
        <el-menu-item v-if="loginFlag" index="personalNotes" @click="editBlog">写博客</el-menu-item>
        <el-submenu index="info" style="float:right">
          <template index="avatar" slot="title">
            <el-avatar :size="30" :src="user.header"></el-avatar>
          </template>
          <template index="spacing" slot="title">
            <span class="spacing"/>
          </template>
          <template index="userInfo" slot="title">{{ user.name?user.name:'请登录' }}</template>
          <el-menu-item v-if="loginFlag" index="personalCenter">个人中心</el-menu-item>
          <el-menu-item v-if="!loginFlag" index="login">登录</el-menu-item>
          <el-menu-item index="logout">注销</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <router-view></router-view>
  </div>

</template>
<script>
import home from '../home/Home'

export default {
  name: 'fff',
  // eslint-disable-next-line vue/no-unused-components
  components: { home },
  data () {
    return {
      blogs: {},
      typeList: {},
      currentPage: 1,
      total: 0,
      pageSize: 2,
      activeIndex: 'homePage',
      component: { home },
      user: {
        username: '请登录',
        header: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
      },
      loginFlag: false,
      isLogin: false,
      username: ''
    }
  },
  created () {
    this.user = JSON.parse(localStorage.getItem('userInfo'))
    if (this.$route.path === '/edit') {
      this.activeIndex = 'personalNotes'
    } else if (this.$route.path === '/UserInfo') {
      this.activeIndex = 'info'
    }
    this.$axios
      .get('/info/' + JSON.parse(localStorage.getItem('userInfo')).userId).then(respone => {
        const data = respone.data.data
        this.loginFlag = true
        this.user.userId = data.userId
        this.user.email = data.email
        this.user.nickname = data.nickname
        this.user.username = data.username
        this.user.name = data.name
        this.user.header = data.header
        this.user.phone = data.phone
        this.user.sex = data.sex
        this.hasLogin = true
        this.$store.commit('SET_USERINFO', data)
        this.$store.commit('SET_TOKEN2', localStorage.getItem('token'))
        // this.$router.push("/")
      })
  },
  methods: {
    handleSelect (key, keyPath) {
      this.activeIndex = key
      this.contentShow(key, keyPath)
    },
    editBlog () {
      this.$router.push('/edit')
    },
    returnHome () {
      this.$router.push('/')
    },
    pageQuery (currentPage) {
      const _this = this
      this.$axios
        .get('/blogs/' + currentPage + '/' + this.pageSize + '/' + this.user.username)
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.total = res.data.data.totalSize
          _this.pageSize = res.data.data.size
          _this.currentPage = res.data.data.currentPage
        })
    },
    myBlogQuery (currentPage) {
      const _this = this
      if (this.$store.getters.getUser) {
        this.userId = this.$store.getters.getUser.userId
      }
      this.$axios
        .post('/myblogs', {
          currentPage: currentPage,
          size: this.pageSize,
          author: this.userId
        })
        .then((res) => {
          _this.blogs = res.data.data.blog
          _this.currentPage = res.data.data.currentPage
          _this.pageSize = res.data.data.size
          _this.total = res.data.data.totalSize
        })
    },
    typeQuery () {
      const _this = this
      this.$axios
        .get('/types')
        .then((res) => {
          _this.typeList = res.data.data
        })
    },
    logout () {
      const _this = this
      this.$axios.get('/logout', {
        header: {
          Authorization: localStorage.getItem('token')
        }
      }).then((res) => {
        _this.loginFlag = false
        _this.$store.commit('REMOVE_INFO')
        _this.$router.push('/login')
      })
    },
    login () {
      this.$router.push('/login')
    },
    showPersonalCenter () {
      this.$router.push('/personal')
    },
    contentShow (key, keyPath) {
      if (key === 'personalNotes') {
        this.myBlogQuery(1)
      } else if (key === 'homePage') {
        this.pageQuery(1)
      } else if (key === 'logout') {
        this.logout()
      } else if (key === 'login') {
        this.login()
      } else if (key === 'personalCenter') {
        this.showPersonalCenter()
      }
    }
  }
}
</script>
<style>
  .menu {
    margin-top: 1%;
  }

  .spacing {
    margin-left: 5px;
  }
</style>
